<template>
  <div>
    <nav_bar title='收货记录' background='#fff' :back="true" :home="true" @back="handlerGobackClick" @home="handlerGohomeClick"></nav_bar>
    <div class="wrapper" v-if="point_item">

    <!-- 统计 -->
    <div class="tit">统计</div>
    <div class="statement">
      <div class="statement-cell">
        <div>车牌</div>
        <div>{{point_item.plate_num||''}}</div>
      </div>
      <div class="statement-cell">
        <div>识别状态</div>
        <div>
          <span v-if="point_item.status == 0" style="color: #878586;margin-left: 10px">{{point_item.status_name}}</span>
          <span v-if="point_item.status == 1" style="color: orange;margin-left: 10px">{{point_item.status_name}}</span>
          <span v-if="point_item.status == 2" style="color: green;margin-left: 10px">{{point_item.status_name}}</span>
        </div>
      </div>
      <div class="statement-cell">
        <div>钢筋捆数</div>
        <div>{{point_imgs.length}}</div>
      </div>
      <div class="statement-cell">
        <div>钢筋总重</div>
        <div>{{point_item.total_weight}}</div>
      </div>

    </div>
    <!-- 统计 end -->

    <!-- 描述 -->
    <div class="tit"><div>描述内容</div><img src="../../../static/images/icon/save.png" alt="" @click="saveDesc"></div>
    <textarea v-model="desc" placeholder="输入描述内容" auto-height></textarea>
    <!-- 描述 end -->

      <!-- 项目表格 -->
      <div class="table">
        <div class="table_header">
          <div class="steel_standard">规格</div>
          <div class="steel_num">捆数</div>
          <div class="steel_abnormal">异常</div>
          <div class="steel_weight">理计/吨</div>
        </div>
        <div class="table_data" v-for="(item,index) of excel_data" :key="index">
          <div class="steel_standard">{{item.brand}}{{item.format}}</div>
           <!--<div class="steel_num">{{item.result_num}}</div>-->
          <div class="steel_num">1</div>
          <div class="steel_abnormal">{{item.result_abnormal}}</div>
          <div class="steel_weight">{{item.result_weight}}</div>
        </div>
        <div class="table_header">
          <div class="steel_standard">整车合计</div>
          <div class="steel_num">{{point_imgs.length}}</div>
          <div class="steel_abnormal">{{point_item.total_abnormal}}</div>
          <div class="steel_weight">{{point_item.total_weight}}</div>
        </div>
      </div>

    <!-- 点条详情 -->
    <div class="tit">钢筋详情</div>
    <div class="detail">
      <div class="opener" v-if="point_imgs.length!=1"></div>
      <scroll-view class="nav-view" scroll-x>
        <div class="nav-view-content" v-for="(item,index) in point_imgs" :key="index">
          <div class="img-wrapper">
            <img :src="item.result_img_url"  mode="aspectFit" @click="prevImg(item.result_img_url)">
          </div>

          <div class="content-name">
            <div>{{item.created_at}}</div>
            <div @click="showDetail(index)" class="content-name-more">更多<div class="iconfont icon-jiantou" :class="{'rotate-down':moreDetailFlag===index}"></div></div>
          </div>
          <div class="detail-content-more" v-if="moreDetailFlag===index">
            <div class="detail-content-more-item">
              <div>
                <span class="label">出厂支数</span>
                <span>{{item.factory_count}}</span>
              </div>
              <div>
                <span class="label">规格</span>
              <span>{{item.format}}</span>
              </div>
            </div>
            <div class="detail-content-more-item">
              <div>
                <span class="label">识别数量</span>
                <span>{{item.result_num}}</span>
              </div>
              <div>
                <span class="label">品名</span>
                <span>{{item.brand_name}}</span>
              </div>
            </div>
            <div class="detail-content-more-item">
              <div>
                <span class="label">异常数量</span>
                <span>{{item.result_abnormal}}</span>
              </div>
              <div>
                <span class="label">材质</span>
                <span>{{item.material}}</span>
              </div>
            </div>
            <div class="detail-content-more-item">
              <div>
                <span class="label">钢筋重量</span>
                <span>{{item.result_weight}}</span>
              </div>
              <div>
                <span class="label">长度</span>
                <span>{{item.length}}</span>
              </div>
            </div>
            <div class="detail-content-more-item">
              <div>
                <span class="label">品牌</span>
                <span>{{item.brand}}</span>
              </div>
              <div>
                <span class="label">理计</span>
                <span>{{item.liji}}</span>
              </div>
            </div>

          </div>
        </div>
      </scroll-view>
    </div>
    <!-- 点条详情  end-->

    <!-- 收货记录 -->
    <div class="record">
      <div class="tit">收货记录</div>
      <scroll-view class="nav-view" scroll-x>
        <div
        class="nav-view-content record-content"
        :class="{'record-content-active':tagIndex===index}"
         v-for="(item,index) in recordNav" :key="index"
          @click="seletRecordTag(index,item)"
          >
          <div>{{item.label}}</div>
        </div>
      </scroll-view>
    </div>
    <!-- 收货记录  end-->


    <!-- 收货图片 -->
    <div class="record-img" v-if="recordList.length!=0">
      <div class="record-item" v-for="(item,index) of recordList" :key="index">
        <div>
          <div class="record-item-tit">
            <div class="label">{{item.title}}</div>
            <div v-if="item.receive_result">{{item.receive_result.updated_at}}</div>
            <!-- <img src="../../../static/images/icon/dustbin.png" alt="" @click="del(item.id)"> -->
          </div>
          <div class="record-item-desc" v-if="item.receive_result">
            {{item.receive_result.remark ||''}}
          </div>
          <div class="record-item-img" @click="prevImg(item.receive_result.img_list)" v-if="item.receive_result">
            <img :src="val" alt="" mode="aspectFill" :key="num" v-for="(val,num) of item.receive_result.img_list">
          </div>
          <div class="no_data" v-else>暂无数据</div>
        </div>

      </div>
    </div>

    <!-- 收货图片 end -->

    <div class="btn_wrapper">
      <!-- 未付费按钮 -->
      <div class="btn" v-if="!is_pay">
        <div><span class="pay_price">￥{{amountPrice}}</span><span class="pay_tip" @click="showRule">收费规则</span></div>
        <div class="submit" @click="buildOrder">提交订单</div>
      </div>
      <!-- 未付费按钮 end-->

      <popup :show="showRuleFlag" @close="hideRule">
        <div class="rule_content">收费规则：用户注册一个月之内单价1元/张，一个月之后3元/张</div>
      </popup>
    </div>
  </div>
  <div class="no_data" v-else>暂无数据</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      steel:'',
      project:"",
      point_item:"",
      point_imgs:"",
      excel_data:'',//表格数据
      item_id:"",
      project_id:'',//项目id
      is_pay:'',//支付状态
      amountPrice:'',//总金额
      showRuleFlag:'',//规则的显示
      moreDetailFlag:'',//显示点条更多详情
      recordNav:[
        {label:'全部',value:''},
        {label:'整车外观',value:''},
        {label:'送货单',value:''},
        {label:'过磅',value:''},
        {label:'卸车',value:''},
        {label:'空车',value:''}
      ],
      tagIndex:'',
      initRecordList:'',//原始的收货记录数据
      desc:'',//项目描述
      recordList:''//收货记录
    }
  },
  onLoad(options){
    this.initData()
    if(options.id){
     this.item_id = options.id;
     this.project_id=options.project_id;//
    };
    this.getPointImgList();
  },
  methods: {
    async saveDesc(){
      //保存描述内容
      let judge=await this.$currency.showModal('保存描述?','')
    },
    handlerGobackClick(){
      wx.navigateTo({url:`/pages/steelList/main?id=${this.project_id}`})
    },
    handlerGohomeClick(){
      wx.switchTab({url:'/pages/home/main'})
    },
    showDetail(index){
      //显示点条更多详情
      if(index===this.moreDetailFlag){
        this.moreDetailFlag='';//点击相同的隐藏
      }else{
        this.moreDetailFlag=index;
      }

    },
    prevImg(url){
      var arr=''
      if(typeof(url)=='string'){
        arr=[`${url}`]
      }else{
        arr=url
      }
      wx.previewImage({
        current:arr[0], // 当前显示图片的http链接
        urls: arr// 需要预览的图片http链接列表
      })
    },
    async getPointImgList(){
      const userToken=wx.getStorageSync('userToken')
      const res=await this.$request.postData('/ucenter/getPointItemImgList',{
        user_token:userToken,
        item_id:this.item_id,
      })
      if(res.data.level=='success'){
         this.project    = res.data.data.project
         this.point_item = res.data.data.point_item
         this.point_imgs = res.data.data.point_imgs
         this.excel_data=res.data.data.excel_data;
         this.amountPrice=res.data.data.amount
         this.is_pay=res.data.data.is_pay

         const record=res.data.data.receives;//收货记录
         this.recordList=record;
        this.initRecordList=record;
        //遍历出收货tabbar
        let arr=''
         arr=record.map(item=>{
           let obj={};
           obj.label=item.title;
           obj.value=item.tag;
           return obj;
         })
         if(arr.length!=0){
           arr.unshift({label:'全部',value:'all'});
         }
         this.recordNav=arr;
      }else{
        this.$currency.showToast(res.data.message)
      }
    },
    showRule(){
      this.showRuleFlag=true
    },
    hideRule(){
      this.showRuleFlag=false
    },
    async buildOrder(){
      //生成订单
      const userToken=wx.getStorageSync('userToken');
      const res=await this.$request.postData('/order/buildOrder',{
        user_token:userToken,
        point_item_id:this.item_id
      })
      if(res.data.level=='success'){
        this.payBuild(res.data.data.order_num)
      }
    },
     async payBuild(order_num){
        //支付
        const _this=this
        const userToken=wx.getStorageSync('userToken');
        const res=await this.$request.postData('/payment/weChatPayment',{
          user_token:userToken,
          order_num:order_num
        })
        if(res.data.level=='success'){
          const data=res.data.data
          setTimeout(()=>{
            wx.requestPayment({
                timeStamp: data.timeStamp,
                nonceStr: data.nonceStr,
                package: data.package,
                signType: data.signType,
                paySign: data.paySign,
                success() {
                  _this.$currency.showToast('支付成功')
                  setTimeout(()=>{
                      _this.getPointImgList()
                    },1500)


                },
                fail(res) {
                  console.log('取消支付')
                }
              })
          },1500)
        }
      },

      async del(id){
       const select=await this.$currency.showModal('是否删除点条项','')
          if(select){
            const userToken=wx.getStorageSync('userToken')
            const res=await this.$request.postData('/ucenter/deletePointItem',{
              point_item_id:id,
              user_token:userToken
            })
            if(res.data.level=='success'){
              this.$currency.showToast(res.data.message)
              setTimeout(()=>{
                this.getSteelList()
              },1500)
            }else{
              this.$currency.showToast(res.data.message)
            }

          }
    },
    seletRecordTag(index,item){
      //选中收货记录的tag
      if(this.tagIndex===index){
        this.tagIndex=0;
        this.recordList=this.initRecordList;
        return
      }else{
        this.tagIndex=index
      }
      if(item.value=='all'){
        this.recordList=this.initRecordList;
        return
      }
      let arr=[];
      this.recordList=this.initRecordList.filter(val=>{
        if(val.tag==item.value){
          return val
        }
      })
    },
    initData(){
      this.steel='';
      this.project="";
      this.point_item="";
      this.point_imgs="";
      this.item_id="";
      this.is_pay='';//支付状态
      this.amountPrice='';//总金额
      this.showRuleFlag='';//规则的显示
      this.moreDetailFlag='';//显示点条更多详情
      this.recordNav=[
        {label:'全部',value:''},
        {label:'整车外观',value:''},
        {label:'送货单',value:''},
        {label:'过磅',value:''},
        {label:'卸车',value:''},
        {label:'空车',value:''}
      ];
      this.tagIndex='';
      this.initRecordList='';//原始的收货记录数据
      this.recordList=''//收货记录
    }
  },


}
</script>
<style lang="scss" scoped>

//项目头部
  .wrapper{
    width: calc(100% - 20px);
    margin-left: 10px;
    font-size: 16px;
  }
  .tit{
    font-weight: 600;
    margin:20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img{
      width: 30px;
      height: 30px;
    }
  }
  .detail{
      position: relative;
    }

  //统计
  .statement{
    margin-top:10px;
    border: 1px solid #eee;
    border-radius: 5px;
    display: flex;
    .statement-cell{
      display: flex;
      flex:1;
      text-align: center;
      justify-content: center;
      flex-wrap: wrap;
      align-content:space-between;
      &>div{
        width: 100%;
        margin:10px 0;
      }
    }
  }

  // 点条详情

  .nav-view{
      overflow:hidden;
      white-space:nowrap;

      .nav-view-content{
        display: inline-block;
        position: relative;
        vertical-align: top;
        width: 300px;
        padding: 10px;
        border-radius: 10px;
        background-color: #eee;
        margin-right: 30px;
        .img-wrapper{
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          border-radius: 10px;
          padding: 5px 0;
        }
        img{
          width:260px;
          border-radius: 10px;
          height: 200px;
        }
        .icon-jiantou{
          transform: rotate(0deg)
        }
        .rotate-down{
          transform: rotate(180deg)
        }
        .content-name{
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: 20px;
          font-size: 12px;
          text-align: center;
          color: #333333;
          &-more{
            display: flex;
            align-items: center;
          }
        }
      }
      .detail-content-more{
        width:300px;
        display: inline-block;
        margin:10px 0;
        .detail-content-more-item{
          display: flex;
          justify-content: space-between;
          &>div{
            width:45%;
            display: flex;
            margin:5px 0;
            justify-content: space-between;
            span:first-child{
              margin-right: 5px;
            }
          }
          .label{
            background:#eee;
            border-radius: 5px;
            padding:2px 5px;
          }
        }
      }
  }

  //收货记录
  .record-content{
    width:auto !important;
    margin-right: 20px !important;
    padding:0 !important;
    &>div{
      border-radius: 5px !important;
      padding:5px 10px !important;
      color: #409eff !important;
      border: 1px solid #d9ecff !important;
      background-color: #ecf5ff !important;
    }
  }
  .record-content-active{
    &>div{
      background-color: #409eff!important;
      color: #fff !important;
    }
  }

  //收货记录的图片列
  .record-img{
    margin-top:20px;
    .record-item{
      border-bottom: 1px solid #eee;
      padding: 20px 0;
      &-tit{
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
          width:30px;
          height: 30px;
        }
        .label{
          border-radius: 5px;
          padding:2px 5px;
          background:#eee;
        }
      }
      &-desc{
      padding:2px 0;
      margin:10px 0;
    }
    &-img{
      display: flex;
      flex-wrap: wrap;
      img{
        margin:5px;
        width:30%;
        height: 100px;
        border-radius: 5px;
      }
    }
    }
  }

    //按钮
    .btn{
    margin-top:20px;
    padding:20px 0;
    display: flex;
    position: fixed;
    bottom:0px;
    width: 100%;
    background: #fff;
    justify-content: space-between;
    .submit{
      color:#fff;
      background: red;
      border-radius: 5px;
      padding:5px 10px;
      margin-right: 20px;
    }
    .pay_tip{
      margin-left:20px;
      font-size: 20px;

    }
    .pay_price{
      color:red;
      font-size: 20px;
      margin-left: 20px;
    }
  }
  .rule_content{
    width:200px;
    height: 180px;
    padding:20px;
  }

  //动画
  .opener {
      width: 30rpx;
      height: 30rpx;
      transform: rotate(-45deg);
      border-bottom: 2px solid  #000000;
      border-right: 2px solid #000000;
      position: absolute;
      z-index:999;
      top: 50%;
      right: 30rpx;
      opacity: 0.5;
      animation: opener .5s ease-in-out alternate infinite;
    }
    @-webkit-keyframes opener {
      100% {
        right: 20rpx;
      }
    }
    .no_data{
      text-align: center;
      line-height: 60px;
      height: 60px;
    }

//项目表格
.table{
  margin-top:30px;
  border:1px solid #eee;
  & .steel_num{
    flex:0.3 !important;
  }
  &  .steel_abnormal{
    flex:0.7 !important;
  }
  &  .steel_weight{
    flex:0.7 !important;
  }
  .table_header,.table_data{
    display: flex;
    text-align: center;
  }
  .table_header{
    &>div{
      flex: 1;
      color: #000;
      font-weight: 600;
      padding:10px 0;
    }
    border-bottom: 1px solid #eee;
    &>div:not(:last-child){
      border-right:1px solid #eee;
    }
  }
  .table_data{
    font-size: 15px;
    &>div{
      padding:10px 0;
      flex: 1;
    }
    &>div:not(:last-child){
      border-right:1px solid #eee;
    }
  }
  .table_data:not(:last-child){
    border-bottom: 1px solid #eee;
  }
}
</style>

